<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>账号</th>
          <th>电子邮件</th>
          <th>性别</th>
          <th>标签</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        
        <tr v-for="(user, index) in users" :key="index">
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.sex }}</td>
          <td>
            <button style="margin-right: 8px;background-color: #666666;">增加tag</button>
            <template v-for="(item, index) in user.tags" :key="index">
              <span class="tag">{{ item }}</span>
            </template>
          </td>
          <td>
            <button @click="deleteUser(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
// 导入 user 模块导出默认对象，并使用别名 UserApi
import UserApi from "../../api/user";

// 定义用户数据，调用api，初始化变量: users。由于 fetchUsers() 返回的是reactive函数结果，是一个响应式对象。因此 users 是对该对象的引用。
const users = UserApi.fetchUsers();

// import { fetchUsers } from '../../api/user'
// const users = fetchUsers();

// 删除用户
const deleteUser = (index) => {
  if (confirm("要删除该用户? ")) {
    const user = users[index];
    // 调用接口，现场远程数据。可以为 deleteByUsername 设计一个回调函数参数，可以获得更多的参数，从而能够增强下一步的逻辑处理能力 ，而不是仅能通过 true 和 false。
    if (UserApi.deleteByUsername(user.username)) {
      //console.log("当前页面组件users: ", users);
      //console.log("js文件中userList: ", UserApi.fetchUsers());
      
    }
  }
};

</script>

<style scoped>

.tag {
  margin-right: 10px;
  padding: 2px 4px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,0.08);
}

.table-container {
  min-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f4f4f4;
}

button {
  padding: 5px 10px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #ff2a2e;
}
</style>
